<script setup>
import { getMonthWastageAssetsOfMonth } from '@/api/visual/wastageAssetsPannel'
import { fontSize } from '@/utils/globalMethod'
const option = computed(() => ({
  title: {
    text: '能源损耗对比趋势',
    textStyle: {
      color: '#fff',
      fontSize: fontSize(0.16)
    },
    top: '5%',
    left: '3%'
  },
  legend: {
    textStyle: {
      color: '#ccc1c1'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [
      '1号',
      '2号',
      '3号',
      '4号',
      '5号',
      '6号',
      '7号',
      '8号',
      '9号',
      '10号',
      '11号',
      '12号',
      '13号',
      '14号',
      '15号',
      '16号',
      '17号',
      '18号',
      '19号',
      '20号',
      '21号',
      '22号',
      '23号',
      '24号',
      '25号',
      '26号',
      '27号',
      '28号',
      '29号',
      '30号',
      '31号'
    ],
    axisLabel: {
      color: '#ccc1c1'
    }
  },
  yAxis: [
    {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#2b2c33'
        }
      },
      axisLabel: {
        color: '#ccc1c1'
      }
    }
  ],
  grid: {
    left: '5%',
    right: '5%',
    bottom: '15%'
  },
  series: [
    {
      name: '本月',
      itemStyle: {
        color: '#FF0000'
      },
      label: {
        show: true,
        color: '#fff'
      },
      emphasis: {
        focus: 'series'
      },
      data: viewData1.value,
      type: 'line',
      smooth: true
    },
    {
      name: '上月',
      itemStyle: {
        color: '#0066FF'
      },
      label: {
        show: true,
        color: '#fff'
      },
      emphasis: {
        focus: 'series'
      },
      data: viewData2.value,
      type: 'line',
      smooth: true
    }
  ]
}))

const viewData1 = ref([])
const viewData2 = ref([])

const loadData = async () => {
  const { data } = await getMonthWastageAssetsOfMonth({ name1: 1 })

  const currMonth = data.filter(item => item.db === '本月')
  const lastMonth = data.filter(item => item.db === '同期')

  viewData1.value = new Array(31).fill(0).reduce((curr, prev, index) => {
    const currIndex = index + 1 < 10 ? '0' + (index + 1) : index + 1

    const findItem = currMonth.find(item => item.DayPart == currIndex)
    if (findItem) {
      curr.push(findItem.wastageAssets)
    } else {
      curr.push(0)
    }
    return curr
  }, [])

  viewData2.value = new Array(31).fill(0).reduce((curr, prev, index) => {
    const currIndex = index + 1 < 10 ? '0' + (index + 1) : index + 1

    const findItem = lastMonth.find(item => item.DayPart == currIndex)
    if (findItem) {
      curr.push(findItem.wastageAssets)
    } else {
      curr.push(0)
    }
    return curr
  }, [])
}

onMounted(loadData)
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box1>
      <ps-chart2 :option="option"></ps-chart2>
    </dv-border-box1>
  </div>
</template>

<style scoped lang="scss"></style>
